<template>   
  <div id="app">   
    <el-row>   
      <!-- 布局中常用的居中写法，让宽度8的分栏偏移8个宽度 -->   
      <el-col :span="8" :offset="8">   
        <!-- 在分栏中添加组件，组件的位置和宽度就由分栏决定 -->   
        <el-card>   
          <!-- 通过slot插槽将div传递给el-card组件 -->  
          <div slot="header" >   
             <span>商品详情</span>   
             <el-button style="float: right; padding: 3px 0" type="text">关闭       
              </el-button>   
           </div>   
           <!-- 内容部分，可以继续用el-row和el-col布局 -->   
           <el-row>   
               <!-- 左边一半显示商品图片  -->   
              <el-col :span="12">   
               <img src="https://via.placeholder.com/300" style="width: 100%;"/> 
              </el-col>   
               <!-- 右边显示商品描述和购买按钮 -->   
               <el-col :span="12">   
                 <el-row>   
                   <el-col :span="24">   
                     <div style="padding: 14px;">   
                       经典汉堡，精选上等食材，鲜嫩多汁，   
                       每一口都让味蕾尽情狂欢，给您带来难以忘怀的美味体验！   
                     </div>   
                   </el-col>   
                 </el-row>   
                 <el-row>   
                  <el-col :span="12" :offset="2">   
                    <el-button type="success" size="mini">立即购买</el-button>   
                  </el-col>   
                  <el-col :span="10">   
                   <el-button type="warning" size="mini">加入购物车</el-button>   
                  </el-col>   
                 </el-row>   
               </el-col>   
             </el-row>   
         </el-card>   
       </el-col>   
     </el-row>   
   </div>   
 </template>   
 <script>   
 export default {   
   name: 'App'   
 }   
 </script>   
<style></style>